<template>
  <el-form ref="ruleFormRef" :rules="rules" :model="formMenu" label-width="100px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="formMenu.name" placeholder="请输入菜单名称"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="路由路径" prop="path">
          <el-input v-model="formMenu.path" placeholder="请输入路由路径"/>
        </el-form-item>
      </el-col>

      <el-col :span="12" v-if="formMenu.level === 1">
        <el-form-item label="组件路径" prop="component_name">
          <el-input v-model="formMenu.component_name" placeholder="请输入组件路径"/>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="菜单图标" prop="web_icon">
          <el-input v-model="formMenu.web_icon" placeholder="请输入菜单图标" disabled>
            <template #append>
              <el-popover
                  :width="350"
                  trigger="click"
                  popper-class="pure-popper"
                  :popper-options="{placement:'right'}"
                  :visible="selectIconVisible">
                <template #reference>
                  <div style="display: flex;justify-content: center;align-items: center;" @click="selectIconVisible = !selectIconVisible">
                    <el-icon>
                      <component style="font-size: 24px;" :is="formMenu.web_icon"></component>
                    </el-icon>
                  </div>
                </template>
                <el-scrollbar height="347px">
                  <Icon @onChangeIcon="onChangeIcon"/>
                </el-scrollbar>
              </el-popover>
            </template>
          </el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="菜单排序" prop="sort">
          <el-input-number v-model="formMenu.sort" :min="0" placeholder="请输入菜单排序"/>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="菜单等级" prop="level">
          <el-select v-model="formMenu.level" placeholder="请选择菜单等级">
            <el-option label="目录" :value="0"></el-option>
            <el-option label="菜单" :value="1"></el-option>
            <el-option label="按钮" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

    </el-row>
  </el-form>

  <div class="dialog-button-wrap">
    <el-button @click="close">取消</el-button>
    <el-button @click="editMenu(ruleFormRef)" :loading="subLoading" type="success" color="#e88d53" class="add-user">保存</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive } from "vue";
import { ElMessage,FormInstance,FormRules } from "element-plus";
import {editMenuApi} from "../../../../api/system/menu/menu.ts";
import Icon from "./Icon.vue";

// 定义事件
const emit = defineEmits(['closeForm','success'])

// 按钮状态
const subLoading = ref(false);
// 表单数据对象
const formMenu = reactive({
  id: 0,
  parent_id: 0,
  name: '',
  sort: 0,
  path: '',
  web_icon: 'Search',
  level: '',
  component_name: ''
});

// 获取父组件roleList,传过来的roleInfo对象,
const props = defineProps(['menuInfo']);
const menuInfo = props.menuInfo;

// 给表单填充数据
for (let key in formMenu) {
  formMenu[key] = menuInfo[key];
}

// 新增函数
const editMenu = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formEl.validate(async (valid,field) => {
    subLoading.value = true;
    if (valid) {
      const { data } =  await editMenuApi(formMenu);
      if (data.code === 200) {
        ElMessage.success(data.msg);
        emit('success')
      } else {
        debugger;
        ElMessage.error(data.msg);
      }
    } else {
      ElMessage.error("提交表单失败,你还有未填写的项")
    }
  })
  subLoading.value = false;
}

// 点击取消关闭弹出框
const close = () => {
  emit('closeForm')
}

const selectIconVisible = ref(false);

const onChangeIcon = (val: any) => {
  formMenu.web_icon = val;
  selectIconVisible.value = false;
}

// 添加表单校验
// 表单实例读写
const ruleFormRef = ref<FormInstance> ();
// 表单约束规则对象
const rules = reactive<FormRules>({
  name: [{ required: true,message: '菜单名称不能为空',trigger: 'blur' }],
  sort: [{ required: true,message: '菜单排序不能为空',trigger: 'blur' }],
  path: [{ required: true,message: '菜单路径不能为空',trigger: 'blur' }],
  web_icon: [{ required: true,message: '菜单图标不能为空',trigger: 'blur' }],
  level: [{ required: true,message: '菜单等级不能为空',trigger: 'blur' }],
})



</script>

<style scoped>
.dialog-button-wrap {
  text-align: center;
  margin-top: 20px;
}
.add-user {
  color: white;
}

</style>